<template>
	<div id="orderManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancel()">订单管理</span>
			<span>/ 订单详情</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>订单详情</span>
				<el-button class="add" @click="cancel()" type="primary">返回</el-button>
			</div>
			<div>
				<div class="head_title">
					<span>基本信息</span>
				</div>
				<span class="infoHead-item"> 姓名&#x3000;{{orderDetail.name}}</span>
				<span class="infoHead-item"> 性别&#x3000;{{orderDetail.gender}}</span>
				<span class="infoHead-item"> 身份&#x3000;{{orderDetail.identityId}}</span>
				<span class="infoHead-item"> 学号&#x3000;{{orderDetail.stuNo}}</span>
			</div>

			<div>
				<div class="head_title">
					<span>订单信息</span>
				</div>
				<span class="infoHead-item"> 订单编号&#x3000;{{orderDetail.orderCode}}</span>
				<span class="infoHead-item"> 场馆名称&#x3000;{{orderDetail.venueName}}</span>
				<span class="infoHead-item"> 场地名称&#x3000;{{orderDetail.fieldName}}</span>
				<span class="infoHead-item"> 项目项目&#x3000;{{orderDetail.sportsItem}}</span>
				<span class="infoHead-item"> 预约时间&#x3000;{{orderDetail.date}} {{calcWeek(orderDetail.date)}}</span>
				<span class="infoHead-item"> 预约场地&#x3000;
					<span v-for="item in orderDetail.orderItemList" :key="item.goodsId">{{item.sheetName}} {{item.startHour}}--{{item.endHour}}</span>
				</span>
				<span class="infoHead-item"> 下单手机&#x3000;{{orderDetail.phone}}</span>
				<span class="infoHead-item"> 订单状态&#x3000;{{orderDetail.orderStatus}}</span>
				<span class="infoHead-item"> 合计项目&#x3000;{{orderDetail.receivableFee}}元</span>
				<span class="infoHead-item"> 支付方式&#x3000;{{orderDetail.payment}}</span>
				<span class="infoHead-item"> 下单时间&#x3000;{{orderDetail.createTime}} {{calcWeek(orderDetail.createTime)}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				orderCode: "",
				orderDetail: {}
			};
		},
		mounted() {
			this.orderCode = this.$util.getUrlParam("orderCode");
			this.getOrderDetail();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 订单详情
			getOrderDetail() {
				let url = this.$util.domain + "/erp/api/v20/venue/order/detail";
				this.orderDetail = {};

				this.$http({
					url,
					method: "GET",
					params: {
						orderCode: this.orderCode
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.orderDetail = response.data.data;
						let $orderStatus = response.data.data.orderStatus;
						let $identityId = response.data.data.identityId;
						let $payment = response.data.data.payment;
						let $gender = response.data.data.gender;
						let $createTime = response.data.data.createTime;
						if ($orderStatus == 1) {
							$orderStatus = "已消费";
						} else if ($orderStatus == 2) {
							$orderStatus = "待消费";
						} else if ($orderStatus == 3) {
							$orderStatus = "消费中";
						} else if ($orderStatus == 4) {
							$orderStatus = "已过期";
						} else if ($orderStatus == 5) {
							$orderStatus = "待支付";
						} else if ($orderStatus == 6) {
							$orderStatus = "已取消";
						}

						if ($identityId == 1) {
							$identityId = "学生";
						} else if ($identityId == 2) {
							$identityId = "硕士";
						} else if ($identityId == 3) {
							$identityId = "博士";
						} else if ($identityId == 4) {
							$identityId = "老师";
						} else if ($identityId == 5) {
							$identityId = "校内人员";
						} else if ($identityId == 6) {
							$identityId = "海龟";
						}

						if ($payment == 1) {
							$payment = "支付宝";
						} else {
							$payment = "微信";
						}

						if ($gender == 0) {
							$gender = "女";
						} else {
							$gender = "男";
						}
						this.orderDetail.gender = $gender;
						this.orderDetail.payment = $payment;
						this.orderDetail.identityId = $identityId;
						this.orderDetail.orderStatus = $orderStatus;
						this.orderDetail.createTime = new Date($createTime).format("yyyy-MM-dd");
					}
				});
			},
			cancel() {
				let status = this.$util.getUrlParam("status"),
					venueId = this.$util.getUrlParam("venueId"),
					fieldId = this.$util.getUrlParam("fieldId"),
					keywords = this.$util.getUrlParam("keywords"),
					bookDateEnd = this.$util.getUrlParam("bookDateEnd"),
					currentPage = this.$util.getUrlParam("currentPage"),
					bookDateStart = this.$util.getUrlParam("bookDateStart");
				let params = {
					bookDateStart, bookDateEnd, venueId, fieldId, status, keywords, currentPage
				}
				this.$util.refreshTo("/#/orderManage?bookDateStart", params);
			},
			calcWeek(date) {
				let day = new Date(date).getDay();
				switch (day) {
					case 1:
						day = "星期一";
						break;
					case 2:
						day = "星期二";
						break;
					case 3:
						day = "星期三";
						break;
					case 4:
						day = "星期四";
						break;
					case 5:
						day = "星期五";
						break;
					case 6:
						day = "星期六";
						break;
					case 0:
						day = "星期日";
						break;
				}
				return day;
			}
		}
	};
</script>

<style scoped>
	#orderManage {
		padding-top: 80px;
		height: calc(100% - 100px);
		overflow: hidden;
	}

	.list {
		height: calc(100% - 140px);
	}

	#orderManage .head_title {
		background: #999999;
		margin: 10px 0 0;
		padding: 5px 0;
	}

	.title {
		color: #0398ff;
	}

	.base {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		background-color: #eee;
	}

	.add {
		position: absolute;
		right: 0px;
	}

	.infoHead {
		padding-top: 10px;
	}

	.infoHead-item {
		display: block;
		font-size: 14px;
		padding: 5px 10px;
	}
</style>